<template>
  <div class="page_container">
    <PageTitle />

    <ScrollContainer>
      <Form
        :data="opts"
        :rows="5"
        :cols="2"
        label-width="100px"
      >
        <template #parent>
          <el-button @click="showParentTree = true" type="primary" class="stick">
            {{parentString}}
          </el-button>
        </template>
      </Form>

      <template #btns>
        <el-button @click="confirm" type="primary" round>
          确认
        </el-button>
        <el-button @click="cancel" round>
          取消
        </el-button>
      </template>
    </ScrollContainer>

    <el-dialog
      title="选择上级权限"
      :visible.sync="showParentTree"
      :close-on-click-modal="false"
    >
      <div class="scrollbar_default check_tree_wrap">
        <CheckTree :data="parentTree" @on-checked="chooseParent"></CheckTree>
      </div>
      <div class="dialog_btns" v-if="parentTree.length">
        <el-button type="primary" @click="confirmParent" round>
          确定
        </el-button>
        <el-button @click="cancelParent" round>
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addPermission,
} from '@/api/home/system/permission.js';
import formMixin from './js/formMixin';
import { handlePermissonChange } from '@u/user.js';

export default {
  name: 'PermissionAdd',
  mixins: [formMixin],
  data() {
    return {
      addFn: addPermission,
      permissonChangeFn: handlePermissonChange,
      cancelMessage: {
        msg: '确定取消新增权限吗？',
      },
      cancelNavTo: {
        to: {
          name: 'Permission',
        },
        from: this.$route.params.from,
        params: {
          removeTagViews: ['PermissionAdd']
        }
      },
      confirmNavTo: {
        name: 'PermissionDetail',
        params: {
          removeAliveRoters: ['Permission'],
          removeTagViews: ['PermissionAdd']
        }
      }
    };
  },
};
</script>

<style lang="scss" scoped>
.check_tree_wrap {
  max-height: 500px;
}
</style>
